<template>
  <div class="page-my-customer">
    <div class="login_bg">
        <img src="../public/imgs/logo.png" alt="">
    </div>
    <div class="form_item">
        <i class="item_iocn icon_phone"></i>
        <input type="text" placeholder="请输入您的手机号" v-model="fomdata.username">
     </div>
      <div class="form_item">
          <i class="item_iocn icon_password"></i>
        <input type="password" placeholder="请输入您的登录密码"  v-model="fomdata.password">
     </div>
     <div class="submit" @click="submit">
          登录
     </div>
  </div>
</template>
<script>
import { Toast  } from "mint-ui";

export default {
  name: "",
  data() {
    return {
        fomdata:{
            username:"",
            password:"",
            checkcode:"",
        }
    };
  },
  created() {},
  mounted() {},
  methods: {
      submit(){
          this.$http.post(this.Interface.Login,{username:this.fomdata.username,password:this.fomdata.password}).then(res=>{
               if(!res.data.success){
              Toast({
                  message: res.data.msg,
                  position: 'center',
                  duration: 5000
                  });
               }else{
                 sessionStorage.setItem("sessionId",res.data.data.sessionId)
               }
              })
      }
  }
};
</script>
<style lang="less">
html,
body {
  height: 100%;
  background: #fff;
}
.page-my-customer {
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  .login_bg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 130px;
    margin-bottom: 125px;

    img {
      width: 213px;
      height: 261px;
    }
  }
  .form_item {
      margin: 0 auto;
      width: 650px;
    .item_iocn {
      position: absolute;
      display: block;
    }
    .icon_phone {
      background: url("../public/imgs/icon_phone.png") no-repeat;
      width: 30px;
      height: 40px;
      background-size: 100%;
      left: 25px;;
    }
    .icon_password{
        background: url("../public/imgs/icon_password.png") no-repeat;
      width: 28px;
      height: 28px;
      background-size: 100%;
      left: 25px;;
    }
    position: relative;
    display: flex;
    margin-bottom: 50px;
    justify-content: center;
    align-items: center;
    input {
      width: 640px;
      height: 85px;
      text-indent: 3em;
      background-color:#fff !important;
      border-bottom: 1px solid #e3e1e1;
    }
  }
  .submit {
    text-indent: 2em;
    font-size: 36px;
    letter-spacing: 2em;
    color: #fff;
    text-align: center;
    line-height: 84px;
    margin: 0 auto;
    width: 638px;
    height: 84px;
    -webkit-border-radius: 6px 7px 7px 6px/7px;
    -moz-border-radius: 6px 7px 7px 6px/7px;
    border-radius: 6px 7px 7px 6px/7px;
    background-color: #5261f7;
  }
}
</style>
